/*
 * @Author: ting.yan
 * @Date: 2019-09-18 19:01:57
 * @Last Modified by: ting.yan
 * @Last Modified time: 2019-09-18 19:15:57
 */

@import "./variable.styl";
@import "./mixin.styl";

body,
html {
  line-height: 1.5;
  font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';
}

.clear-fix {
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}

// show ellipsis when the text in a single line overflow 
.single-text-overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// show ellipsis when the text in multi-line($lineNum lines) overflow
@mixin multi-text-overflow-ellipsis($lineNum) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lineNum;
  overflow: hidden;
}

.polyfill-mr {
  margin-right: $spacing-size-card;
}

.polyfill-ml {
  margin-left: $spacing-size-card;
}

.polyfill-pr {
  padding-right: $spacing-size-card;
}

.polyfill-pl {
  padding-left: $spacing-size-card;
}

// Default title style
.example-page-title {
  position: relative;
  margin: 10px 0;
  padding: 0 15px;
  font-size: $fontsize-medium;
  color: $color-dark-grey;
}

.example-page-title:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 15px;
  background: $color-dark-grey;
}

// subheader style
.subheader {
  margin: 4px 0;
  font-size: $fontsize-default;
  color: $color-light-grey;
}
